<template>
  <div ref="threeBox" class="absolute inset-0"></div>
</template>

<script setup>
import { ref, defineExpose } from "vue";

const threeBox = ref(null);
const threePara = {
  camera: null,
  renderer: null,
};

//页面改变尺寸
window.addEventListener("resize", function () {
  if (threePara.camera) {
    threePara.camera.aspect =
      threeBox.value.clientWidth / threeBox.value.clientHeight;
    threePara.camera.updateProjectionMatrix();
  }
  if (threePara.renderer) {
    threePara.renderer.setSize(
      threeBox.value.clientWidth,
      threeBox.value.clientHeight
    );
  }
});

defineExpose({
  threeBox,
  threePara,
});
</script>
